
<template>
	<view class="contentp">
		<view class="content-back">
		<image class="content-posi" src="/static/img/content.png"></image>
		<view class="blo5" style="padding-top: 40px;">
			<view class="lin1">HI，</view>
			<view class="lin2">我是您的AI创作师</view>
		</view>
		<view class="flexl1">
			<view class="inp" style="width:calc(100vw - 150px)">
				<uni-icons type="search" size="24" color="#78A4A1"></uni-icons>
						
				
				<input class="inpt" placeholder="搜索" 
							confirm-type="send" style="font-size: 30rpx;" 
							cursor-spacing="40" @confirm="search" 
							  
							ref="inputRef" v-model="keyword" :adjust-position="false"/> 
						
			</view>
			<view class="btn1" @click="goAssist">AI助理</view>
		</view>
	</view>

		<scroll-view  scroll-x style="height: 70px;">
		<view class="block1">
			<view :class="activeIdx==idx?'active':'none'" class="blo7" @tap="chooseTab(idx)" v-for="(item,idx) in tabs" :key="idx">
				{{ item.title }}
				
				
			</view>

		</view>
	</scroll-view>
		<scroll-view  scroll-y @scrolltolower="goBottom">
		<view class="blo8">
			<view @tap="goChat(index)" :style="{
				background:item.color
			}" class="blo9" v-for="(item,index) in data" :key="index">
			<view style="display: flex;align-items: center;flex-wrap: wrap;margin-bottom: 12px;font-size: 16px;"><u-image :src="item.tp_url" width="50" height="50" style="margin-right: 8px;"></u-image>{{ item.title }}</view>
			<view style="font-size: 14px;height: 40px;overflow: hidden;">{{ item.desc }}</view>
			</view>
		</view>
	</scroll-view>
	</view>
</template>

<script>
let s;
import share from '@/utils/share'
	export default {
		name:"subscribe",
    components:{},
		data() {
			return {
				activeIdx:0,
				keyword:'',
				data:[
					
				],
				page:1,
				total:0,
				tabs:[
					
				]
            }
		},
		onLoad() {
				this.getData()
			
		},
		mounted() {
			
		},
		
		computed:{
			
		},
		methods: {
			goAssist(){
				uni.switchTab({
                    url:'/pages/assist/assist'
                  })
			},
			search(){
				this.page = 1
				this.getDataList()
			},
			async goChat(idx){
				const r = await this.$u.api.createIsHave({
					model_id:this.data[idx].id
				})
				if(r){
					if(r.data.have==1){
						uni.navigateTo({
							url: '/pages/chat/chat?type=content&id='+this.data[idx].id
						})
					}else{
						this.$u.toast('此模型仅VIP会员可用');
					}
					
				}else{
					this.$u.toast('此模型仅VIP会员可用');
				}
				
			},
			goBottom(){
				if(this.total/20>this.page){
					this.page++
					this.getDataList()
				}
			},
			getRandomColor(i){
				let colors = ['#D07B92','#DDB379','#1C2550','#483F76','#669ED9','#A2769A']
				// var r = Math.floor(Math.random() * 256);
				// var g = Math.floor(Math.random() * 256);
				// var b = Math.floor(Math.random() * 256);
				// return "rgb(" + r + "," + g + "," + b + ",.1)";
				return colors[i]
			},
			async getData(){
				const r = await this.$u.api.createClassify()
				if(r){
					this.tabs = r.data
					this.getDataList()
				}
			},
			async getDataList(){
				const r = await this.$u.api.createList({
					classify_id:this.tabs[this.activeIdx].id,
					page:this.page,
					size:20,
					title:this.keyword,
				})
				if(r){
					if(this.page==1) this.data = []
					this.total = r.data.count
					r.data.item.forEach((item,index)=>{
						if(item.status){
							item.color = this.getRandomColor(index%6)
							this.data.push(item)
						}
						
					})
					this.keyword = ''
				}
			},
			chooseTab(idx){
				this.activeIdx = idx
				this.page = 1
				this.getDataList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentp{
		.blo5{
		padding: 40rpx 30rpx;
		.lin1{
		color: #C4BBA6;
		font-size: 60rpx;
		font-weight: 800;
		margin:0rpx 0 16rpx;
	}
	.lin2{
		color: #C4BBA6;
		font-size: 40rpx;

	}
	
	}
	.flexl1{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
		.inp{
			padding: 16rpx 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
			margin:0 40rpx;
			border-radius: 60rpx;
			border: 1px solid #78A4A1;
			.inpt{
				margin-left: 20rpx;
				color: #fff;
			}
		}
		}
		.btn1{
			white-space: nowrap;
			border-radius: 50rpx;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding:26rpx 40rpx;
			color:#000;
			font-size: 30rpx;
			font-weight: 500;
			text-align: center;
		}
		.block1{
		white-space: nowrap;
		overflow-x: auto;
		margin:50rpx  0  30rpx;
		.blo7{
			display: inline-flex;
			color: #fff;
			font-size: 38rpx;
			padding-bottom: 12rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
		.active{
			color: #78A4A1;
			font-weight: 500;
			border-bottom: 6rpx solid #78A4A1;
		}
		
	}
	.blo8{
		display: flex;
		flex-wrap: wrap;
		.blo9{
			color: #fff;
			width: calc((100% - 72rpx)/2);
			border-radius: 20rpx;
			background: #75CCD1;
			padding: 48rpx 30rpx;
			margin-left: 24rpx;
			margin-bottom: 24rpx;
		}
	}
	.content-back{
		width:100%;
		height: 180px;
		// background-image: url(/static/img/content.png);
		// background-size: 220px 140px;
		// background-position: right top;
		// background-repeat: no-repeat;
	}
	.content-posi{
		position: absolute;
		right: 0;
		width: 220px;
		height: 140px;
	}
		
}
</style>
